<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>

</html>
<script src="./layui/layui.js"></script>
<!--<script src="./jquery/jquery.js"></script>-->
<script>
    layui.use(['table','jquery','laypage'], function(){
        var table = layui.table,
            laypage = layui.laypage,
            $ = layui.jquery;

        //第一个实例
        table.render({
             elem: '#demo'
            ,height: 312
            ,url: 'http://www.api.com/feedbacks' //数据接口
            ,page: {
                 limit:3
            } //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'name', title: '用户名', width:80,edit:'text'}
                ,{field: 'sex', title: '性别', width:80, sort: true}
                ,{field: 'phone', title: '手机号码', width:80}
                ,{field: 'skill', title: '技能', width: 177}
                ,{field: 'idea', title: '个人简介', width: 80, sort: true}
                ,{fixed: 'right', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });

        table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
            $.ajax({
                url : "http://www.api.com/feedbacks/" + obj.data.id,
                type : 'POST',
                data : {
                    field : obj.field,
                    value : obj.value,
                    _method : "PUT"
                },
                contentType : "application/x-www-form-urlencoded",
                dataType : "json",
                success : function(res){
                    console.log(res)
                }
            });
        });
        table.on("tool(test)",function(obj){
            console.log(obj.data);
            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'del':
                    layer.confirm('真的删除行么', function(index){
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

                        //向服务端发送删除指令
                        $.ajax({
                            url : "http://www.api.com/feedbacks/" + obj.data.id,
                            type : 'POST',
                            data : {
                                _method : "DELETE"
                            },
                            contentType : "application/x-www-form-urlencoded",
                            dataType : "json",
                            success : function(res){
                                //console.log(res)
                                layer.msg(res.msg);
                            }
                        });
                        layer.close(index);
                    });
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });
    });
</script>